import React, { PropTypes } from 'react';
import { Layout, Table, Pagination } from 'antd';
import Navigation from '../Navigation/Navigation';
import PermissionSearch from '../PermissionSearch/PermissionSearch';
import styles from './UserList.less';

const { Content } = Layout;

const columns = [{
  title: '用户名',
  dataIndex: 'userName',
  key: 'userName',
}, {
  title: '邮箱',
  dataIndex: 'email',
  key: 'email',
}, {
  title: '手机',
  dataIndex: 'mobile',
  key: 'mobile',
}, {
  title: '创建时间',
  dataIndex: 'createDate',
  key: 'createDate',
}, {
  title: '状态',
  dataIndex: 'status',
  key: 'status',
  render: (text, record, index) => {
    if (0 == text) {
      return ('正常');
    } else if (1 == text) {
      return ('锁定');
    } else if (2 == text) {
      return ('禁用');
    } else {

    }
  },
}];

const handleSelectChange = ({ selectedRowKeys, selectedRows }) => {
  console.log(selectedRowKeys);
  console.log(selectedRows);
};

const rowSelection = {
  onChange: handleSelectChange,
};

const UserList = ({ data, loading, handlePageChange }) => {
  return (
    <Layout>
      <Content className="content">
        <Table rowKey={record => record.id} pagination={false} loading={loading} rowSelection={rowSelection} columns={columns} dataSource={data.data} />
        <Pagination className={styles.normal} onChange={handlePageChange} total={data.total} defaultPageSize={data.defaultPageSize} />
      </Content>
    </Layout>
  );
};

UserList.propTypes = {
  data: PropTypes.object.isRequired,
};

export default UserList;
